<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>
<div id="app">
    <!--    表单-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">
        <el-form-item label="当前状态">
            <el-select v-model="brand.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="企业名称">
            <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌名称">
            <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <!--    按钮-->
    <el-row>
        <el-button type="danger" @click="deleteByIdAllBrand">批量删除</el-button> <!--  -->
        <el-button type="primary"  @click="dialogVisible = true"  >新增</el-button>
    </el-row>
    <!--    添加数据对话框表单-->
    <el-dialog
            title="编辑品牌"
            :visible.sync="dialogVisible"
            width="30%">

        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.brandName"></el-input>
            </el-form-item>
            <el-form-item label="企业名称">
                <el-input v-model="brand.companyName"></el-input>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch v-model="brand.status"
                           active-value="1"
                           inactive-value="0">
                </el-switch>
            </el-form-item>
            <el-form-item>
                <el-button  type="primary" @click="addBrand" >提交</el-button> <!--@click="addBrand" -->
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button  type="primary" @click="updateBrand">修改</el-button>   <!-- @click="updateBrand"-->
            </el-form-item>
        </el-form>


    </el-dialog>

    <!--    表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="brandName"
                    label="品牌名称"
                    align="center"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    label="企业名称"
                    align="center"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    align="center"
                    label="排序">
            </el-table-column>
            <el-table-column
                    prop="statusStr"
                    align="center"
                    label="当前状态">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">
                <el-button type="primary" @click="dialogVisible = true" >修改</el-button>  <!--@click="dialogVisible = true"-->
                <el-button   type="danger"  @click="deleteBrand" >删除</el-button><!--     @click="deleteBrand"-->
            </el-table-column>
        </el-table>
    </template>
    <!--    分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15,20 ]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
    </el-pagination>

</div>

<script src="vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    new Vue({
         el:"#app",
        mounted() {
            // this.selectAll();

            this.selectAllPage();


     },
         methods:{

             //分页查询
             selectAllPage(){
                 axios({
                     method:"post",
                     url:"http://localhost:8080/javaWeb/brand/selectAllPage"+"?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
                     data:this.brand
                 }).then(resp =>{
                this.tableData= resp.data.rows;
                this.totalCount =resp.data.totalCount;

                 })
             },

             //分页条件查询
             selectTPage(){
                 axios({
                     method:"post",
                     url:"http://localhost:8080/javaWeb/brand/selectTPage"+"?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
                     data:this.brand
                 }).then(resp=>{
                   this.tableData=resp.data.rows;
                   this.totalCount=resp.data.totalCount;
                 })
             },

             //批量删除
             deleteByIdAllBrand(){
                 for (let i = 0; i < this.multipleSelection.length; i++) {
                     let ids  =this.multipleSelection[i]
                     this.delAllId[i]=ids.id
                 }

                 this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
                     type: 'warning'
                 }).then(() => {

                     axios({
                         method:"post",
                         url:"http://localhost:8080/javaWeb/brand/deleteByIdAllBrand",
                         data:this.delAllId
                     }).then( resp =>{

                         if (resp.data =="success"){
                             //删除成功
                             this.$message({
                                 message: '恭喜你，批量删除成功',
                                 type: 'success'
                             });
                         };
                         this.selectAllPage();



                     });
                 }).catch(() => {
                     this.$message({
                         type: 'info',
                         message: '已取消删除'
                     });
                 });

             },

             //修改一条数据
             updateBrand(){
                 this.brand.id = this.multipleSelection[0].id
                 axios({
                   method:"post",
                   url:"http://localhost:8080/javaWeb/brand/updateBrand",
                     data:this.brand
               }).then(resp =>{

                   if (resp.data =="success"){
                       //删除成功
                       this.$message({
                           message: '恭喜你，修改成功',
                           type: 'success'
                       });
                   };

                     this.selectAllPage();
                     this.dialogVisible = false;
               })
             },

             //删除一条数据
             deleteBrand(){
                 this.udId  = this.multipleSelection[0].id;
                 axios({
                     method:"post",
                url:"http://localhost:8080/javaWeb/brand/deleteById",
                     data:this.udId
                 }).then( resp =>{

                  if (resp.data =="success"){
                     //删除成功
                      this.$message({
                          message: '恭喜你，删除成功',
                          type: 'success'
                      });
                  };
                     this.selectAllPage();

                     this.dialogVisible = false;

                 })
             },
             //新增一条数据
             addBrand(){
             axios({
                 method: "post",
                 url:"http://localhost:8080/javaWeb/brand/addBrand",
                 data:this.brand
             }).then(resp =>{
                 if (resp.data == "success"){
                     //添加成功

                     this.$message({
                         message: '恭喜你，添加成功',
                         type: 'success'
                     });
                 }
                 this.selectAllPage();

                 this.dialogVisible = false;

             })
             },

             //         查询所有
             // selectAll(){
             //   axios({
             //       method:"get",
             //       url:"http://localhost:8080/javaWeb/brand/selectAll"
             //   }).then(resp =>{
             //       this.tableData= resp.data;
             //   })
             // },

             tableRowClassName({row, rowIndex}) {
                 if (rowIndex === 1) {
                     return 'warning-row';
                 } else if (rowIndex === 3) {
                     return 'success-row';
                 }
                 return '';
             },

             //复选框选中后执行的方法
             handleSelectionChange(val) {
                 this.multipleSelection = val;
                 console.log(this.multipleSelection)
             },
             //查询方法
             onSubmit() {
                 // console.log(this.brand);
                 this.selectTPage();


             },
             //       分页工具条
             handleSizeChange(val) {
                 // console.log(`每页 ${val} 条`);
                 // 重新设置每页显示的条数
                 this.pageSize=val;
                 this.selectAllPage();
             },
             handleCurrentChange(val) {
                 // console.log(`当前页: ${val}`);
                 this.currentPage =val;
                 this.selectAllPage();
             }
         },
        data(){

             return {
                      //表格数据模型
                 tableData:[],

                 // 复选框数据
                 multipleSelection: [],

                 //    添加对话框表单数据
                 //对应搜索表单数据
                 brand: {
                     status: '',
                     brandName: '',
                     companyName: '',
                     id: '',
                     ordered: '',
                     description: ''
                 },

                 //添加数据对话框是否展示标记
                 dialogVisible: false,
                 //当前页面
                 currentPage: 1,
                 //总记录数
                 totalCount:100,
                 //每页显示的条数
                 pageSize:5,

                 udId:'',
                 delAllId:[],


             }
        }


    });
</script>


</body>
</html>